<template>
    <div class="energy-consumption-dashboard">
        <!-- 嵌套环形图 -->
        <div class="chart-container">
            <div ref="chartContainer" class="donut-chart"></div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table">
            <div class="table-header">
                <div class="col-category">分类</div>
                <div class="col-energy">能耗</div>
                <div class="col-ratio">占比</div>
                <div class="col-change">较昨日变化</div>
            </div>

            <div class="table-body">
                <div
                    v-for="(item, index) in tableData"
                    :key="index"
                    :class="['table-row', { 'total-row': item.isTotal }]"
                >
                    <div class="col-category">
            <span
                :class="['category-indicator', item.colorClass]"
                v-if="!item.isTotal"
            ></span>
                        {{ item.category }}
                    </div>
                    <div class="col-energy">{{ item.energy }}</div>
                    <div class="col-ratio">{{ item.ratio }}</div>
                    <div :class="['col-change', item.changeClass]">
                        {{ item.change }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'EnergyConsumptionChart',
    data() {
        return {
            chart: null,
            // 今日数据
            todayData: [
                { name: '电', value: 124.4, color: '#1890ff' },
                { name: '水', value: 68.4, color: '#ff7875' },
                { name: '气', value: 23.5, color: '#73d13d' },
                { name: '其他', value: 0, color: '#8c8c8c' }
            ],
            // 昨日数据
            yesterdayData: [
                { name: '电', value: 129.1, color: '#1890ff' },
                { name: '水', value: 64.2, color: '#ff7875' },
                { name: '气', value: 27.4, color: '#73d13d' },
                { name: '其他', value: 0, color: '#8c8c8c' }
            ],
            // 表格数据
            tableData: [
                {
                    category: '电',
                    energy: '124.4K',
                    ratio: '64%',
                    change: '-3.6%',
                    changeClass: 'negative',
                    colorClass: 'blue',
                    isTotal: false
                },
                {
                    category: '水',
                    energy: '68.4K',
                    ratio: '26%',
                    change: '+6.4%',
                    changeClass: 'positive',
                    colorClass: 'red',
                    isTotal: false
                },
                {
                    category: '气',
                    energy: '23.5K',
                    ratio: '10%',
                    change: '-14.2%',
                    changeClass: 'negative',
                    colorClass: 'green',
                    isTotal: false
                },
                {
                    category: '其他',
                    energy: '0K',
                    ratio: '0%',
                    change: '-14.2%',
                    changeClass: 'negative',
                    colorClass: 'gray',
                    isTotal: false
                },
                {
                    category: '总计',
                    energy: '216.3K',
                    ratio: '100%',
                    change: '-14.2%',
                    changeClass: 'negative',
                    colorClass: '',
                    isTotal: true
                }
            ]
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.initChart()
        })
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartContainer)

            const option = {
                title: [
                    {
                        text: '昨日',
                        left: 'center',
                        top: '62%',
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    },
                    {
                        text: '本日',
                        left: 'center',
                        top: '77%',
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                ],
                series: [
                    // 内圈 - 昨日数据
                    {
                        name: '昨日',
                        type: 'pie',
                        radius: ['25%', '45%'],
                        center: ['50%', '50%'],
                        data: this.yesterdayData.map(item => ({
                            name: item.name,
                            value: item.value,
                            itemStyle: {
                                color: item.color,
                                opacity: 0.7
                            }
                        })),
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        silent: false
                    },
                    // 外圈 - 今日数据
                    {
                        name: '本日',
                        type: 'pie',
                        radius: ['50%', '75%'],
                        center: ['50%', '50%'],
                        data: this.todayData.map(item => ({
                            name: item.name,
                            value: item.value,
                            itemStyle: {
                                color: item.color
                            }
                        })),
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        silent: false
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: 'transparent',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: function(params) {
                        return `${params.seriesName}<br/>${params.name}: ${params.value}K (${params.percent}%)`
                    }
                }
            }

            this.chart.setOption(option)
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
        // 更新数据的方法
        updateData(todayData, yesterdayData) {
            if (todayData) this.todayData = todayData
            if (yesterdayData) this.yesterdayData = yesterdayData

            if (this.chart) {
                this.initChart()
            }
        }
    }
}
</script>

<style scoped>
.energy-consumption-dashboard {
    width: 100%;
}

.chart-container {
    padding: 0 20px 20px 20px;
    background: #fff;
}

.donut-chart {
    width: 100%;
    height: 210px;
}

.data-table {
    border-top: 1px solid #f0f0f0;
}

.table-header {
    display: flex;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    color: #666;
    font-size: 14px;
}

.table-header > div {
    padding: 12px 16px;
    text-align: center;
}

.table-body {
    background: #fff;
}

.table-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s;
}

.table-row:hover {
    background-color: #fafafa;
}

.table-row:last-child {
    border-bottom: none;
}

.total-row {
    background-color: #f9f9f9;
    font-weight: 500;
}

.table-row > div {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
}

.col-category {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.col-energy {
    flex: 1;
    font-weight: 500;
}

.col-ratio {
    flex: 1;
    color: #666;
}

.col-change {
    flex: 1;
    font-weight: 500;
}

.category-indicator {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.category-indicator.blue {
    background-color: #1890ff;
}

.category-indicator.red {
    background-color: #ff7875;
}

.category-indicator.green {
    background-color: #73d13d;
}

.category-indicator.gray {
    background-color: #8c8c8c;
}

.positive {
    color: #52c41a;
}

.negative {
    color: #ff4d4f;
}
</style>
